<template>
	<view class="y">
		<view class="x" style="background-color: #aaaaff; width: 750rpx;height: 350rpx;">
			<image src="../../static/消息-信息.png" class="xiao"></image>
			<image src="../../static/138设置、系统设置、功能设置、属性.png" class="she" @click="tui"></image>
			<label style="margin-top: 100rpx; margin-left: 30rpx;color: aliceblue;">HI,未设置昵称</label>
			<image src="../../static/1.jpg" class="a"></image>

			<!-- 余额模块 -->
			<view class="yu">
				<view class="x"
					style="display: flex;justify-content: space-around;margin-top: 20rpx;margin-right: 40rpx;">
					<label>0.00</label>
					<label style="margin-left: 50rpx;">0</label>
				</view>
				<view class="x" style="display: flex;justify-content: space-around;margin-top: 30rpx;">
					<label>余额</label>
					<label>优惠券</label>
				</view>
			</view>
		</view>

		<!-- 背景颜色 -->
		<view style="background-color: #e9e9e9;">


			<!-- 全部订单模块 -->
			<view class="quan">
				<view class="x" style="flex-wrap: wrap; display: flex; justify-content: space-around;">
					<view class="y" style="width: 150rpx;align-items: center;">
						<image src="../../static/全部订单 (1).png" class="din"
							style="width: 45rpx; height: 45rpx; margin-top: 38rpx;"></image>
						<view class="bu">全部订单</view>
					</view>
					<view class="y" style="width: 150rpx;align-items: center;">
						<image src="../../static/待付款.png" class="din"></image>
						<view class="bu">待付款</view>
					</view>
					<view class="y" style="width: 150rpx;align-items: center;">
						<image src="../../static/待发货.png" class="din"></image>
						<view class="bu">待发货</view>
					</view>
					<view class="y" style="width: 150rpx;align-items: center;">
						<image src="../../static/3.1待评价.png" class="din"></image>
						<view class="bu">待评价</view>
					</view>
				</view>
			</view>

			<!-- 图片 -->
			<image src="https://s1.ax1x.com/2020/04/07/G2usUI.png" class="i"></image>

			<!-- 地址管理 -->
			<view class="dizhi">
				<view class="x" style="flex-wrap: wrap;">
					<image src="../../static/灰色定位.png" class="dinwei"></image>
					<view class="zi" @click="guanli">地址管理</view>
					<image src="../../static/尖括号.png" class="jiankuohao" @click="guanli"></image>
				</view>

				<view class="y">
					<view class="x" style="flex-wrap: wrap;">
						<image src="../../static/铃铛.png" class="dinwei"></image>
						<view class="zi">我的优惠券</view>
						<image src="../../static/尖括号.png" class="jiankuohao"></image>
					</view>
				</view>

				<view class="y">
					<view class="x" style="flex-wrap: wrap;">
						<image src="../../static/客服.png" class="dinwei"></image>
						<view class="zi" @click="kefu">我的客服</view>
						<image src="../../static/尖括号.png" class="jiankuohao" @click="kefu"></image>
					</view>
				</view>
			</view>


			<!-- 设置管理 -->
			<view class="dizhi">
				<view class="x" style="flex-wrap: wrap;">
					<image src="../../static/我的收藏.png" class="dinwei"></image>
					<view class="zi">我的收藏</view>
				</view>

				<view class="y">
					<view class="x" style="flex-wrap: wrap;">
						<image src="../../static/关于.png" class="dinwei"></image>
						<view class="zi">关于</view>
					</view>
				</view>

				<view class="y">
					<view class="x" style="flex-wrap: wrap;">
						<image src="../../static/灰色设置.png" class="dinwei"></image>
						<view class="zi">设置</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {


			}
		},
		methods: {
			kefu() {
				uni.navigateTo({
					url: '/pages/ai/ai'
				})
			},
			tui() {
				uni.navigateTo({
					url: '/pages/logout/logout'
				})
			},
			guanli() {
				uni.navigateTo({
					url: '/pages/wode/di'
				})
			}
		}
	}
</script>

<style>
	.x {
		display: flex;
		/* 打开弹性布局 */
		flex-direction: row;
		/* 横 */

	}

	.y {
		display: flex;
		/* 打开弹性布局 */
		flex-direction: column;
		/* 竖 */
	}

	.she {
		position: fixed;
		/* 固定定位 */
		top: 20rpx;
		right: 20rpx;
		width: 40rpx;
		height: 40rpx;
	}

	.a {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		position: fixed;
		top: 70rpx;
		right: 140rpx;
	}

	.xiao {
		position: fixed;
		/* 固定定位 */
		top: 20rpx;
		right: 100rpx;
		width: 40rpx;
		height: 40rpx;
	}

	.jiankuohao {
		margin-left: 450rpx;
		margin-top: 18rpx;
		width: 40rpx;
		height: 40rpx;
	}

	.yu {
		position: fixed;
		/* 固定定位 */
		top: 190rpx;
		left: 25rpx;
		background-color: #ffffff;
		width: 700rpx;
		height: 150rpx;
		border-radius: 20rpx;
	}

	.quan {
		border-radius: 20rpx;
		/* 圆角 */
		margin: auto;
		margin-top: 10rpx;
		background-color: #ffffff;
		width: 700rpx;
		height: 150rpx;
	}

	.din {
		margin: 0 auto;
		/* margin-left: 75rpx; */
		margin-top: 30rpx;
		width: 50rpx;
		height: 50rpx;

	}

	.bu {
		margin: 0 auto;
		margin-top: 15rpx;
		font-size: 20rpx;
	}

	.i {
		text-align: center;
		/* align-items: center; */
		/* margin: 0 auto; */
		/* display: flex;
		justify-content: space-around; */
		width: 700rpx;
		height: 170rpx;
		margin-left: 25rpx;
		margin-top: 10rpx;
	}

	.dizhi {
		border-radius: 20rpx;
		/* 圆角 */
		margin-top: 10rpx;
		margin-left: 25rpx;
		background-color: #ffffff;
		width: 700rpx;
		height: 200rpx;
	}

	.dinwei {
		margin-left: 20rpx;
		margin-top: 20rpx;
		width: 40rpx;
		height: 40rpx;
	}

	.zi {
		margin-top: 23rpx;
		margin-left: 20rpx;
		color: #000000;
		font-size: 25rpx;
	}
</style>